<template>
  <div class="card-widget card-recent-post">
    <div class="item-headline">
      <i class="haofont hao-icon-eicon_map-2-line1"></i>
      <span>{{ siteConfig.postTitle }}</span>
    </div>
    <div class="aside-list">
      <!-- 最新文章，用户可以自定义展示数量 -->
      <div class="aside-list-item" v-for="(post , index) in postList" :key="index">
        <a class="thumbnail" href="javascript:void(0);" @click="toPath('article?id=' + post.id)" :title="post.title">
          <img :alt="post.title" :src="post.image ? post.image : '/src/assets/images/404s.gif'"/>
        </a>
        <div class="content">
          <a class="title" href="javascript:void(0);" @click="toPath('article?id=' + post.id)" :title="post.title">
            {{ post.title }}
          </a>
          <time :title="post.dateTime" :datetime="post.dateTime">{{ post.dateTime }}</time>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {computed} from "vue";
import {useRouter} from 'vue-router';
import store from "../../store/index.js";

const router = useRouter();
const siteConfig = computed(() => store.state.data.siteConfig);
const postList = computed(() => store.state.data.asidePostList);

const toPath = (path) => {
  router.push(path)
}
</script>

<style scoped>
</style>
